<template>
    <view class="content">
        <!-- 取消预约付款 -->
        <van-nav-bar title="取消预约" left-arrow @click-left="onClickLeft" id="navBarS"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="scroll_wrapper">
                <!-- <view class="moneyBg">
                    <view class="text">{{ navBarTitle }}</view>
                </view> -->
                <view class="defaultDetailBox topInfo">
                    <view class="serviceInfoTitle">预约取消违约金</view>
                    <view class="defaultAmount">
                        <!-- <view>违约金额</view> -->
                        <view class="cancelDefaultAmount">￥{{penalty}}</view>
                    </view>
                </view>
                <!-- 服务信息 -->
                <view class="serviceInfo">
                    <view class="serviceInfoTitle">预约详情</view>
                    <view class="serviceInfoContent">
                        <view class="serviceInfoLabel">服务编号： <span>45861441122111</span></view>
                        <view class="serviceInfoLabel">服务时间： <span>{{leServiceReservationList.reservationTime}}</span></view>
                        <view class="serviceInfoLabel">预约地址： <span>{{leServiceReservationList.addressDetail}}</span></view>
                        <view class="serviceInfoLabel">联系电话： <span>{{ leServiceReservationList.contactPhone }}</span></view>
                    </view>
                </view>
                <!-- 服务人员 Service Staff-->
                <view class="serviceStaffInfo">
                    <view class="serviceStaffInfoTitle">服务人员</view>
                    <view class="serviceStaffInfoContent">
                        <view class="serviceStaffImg"><img
                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png"
                                alt="" mode="widthFix"></view>
                        <view class="serviceStaffText">
                            <view class="staffName">{{employeeInfo.name}} <span v-if="Number(employeeInfo.workYear)>0">{{  employeeInfo.workYear}}年工作经验</span></view>
                            <view class="staffInfoLabel">
                                <view class="labelItem" v-for="(item,index) in employeeInfo.labels" :key="index">
                                    {{item.name}}
                                </view>
                                <!-- <view class="labelItem" v-for="(item,index) in labelList" :key="index"
                                    :class="index===0 ? 'labelItem' : (index===1 ? 'blueItem' : (index==2 ? 'greenItem':'') )">
                                    {{item}}
                                </view> -->
                            </view>
                        </view>
                        <view class="serviceInfoTel"> <van-icon name="phone" siza="22" color="#ff6203"/> </view>
                    </view>
                </view>
                <view class="paymentInfo">
                    <view class="paymentInfo_top">
                        <view class="serviceInfoTitle">支付方式</view>
                        <view class="myPoints">我的积分<img
                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                alt=""
                                style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />{{currentPoints}}
                        </view>
                    </view>
                    <view class="payment">
                      <view class="payment_top">
                          <view class="payment_left price_detail_name">支付方式</view>
                          <view class="payment_right  price_detail_name" @click="openPayment(currentPoints,maxPoints)">支付
                            <span class="payment_num">
                              <span  v-if="shouldShowIntegrals"> <img
                                  src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                  alt=""
                                  style="height: 13px; width: 13px;margin-left: 11px; margin-right: 6px;"/>
                              {{ useIntegrals}}  </span> <span v-if="shouldShowPlus">+</span> <span v-if="shouldShowCash">￥{{ useCash }}</span></span>
                              <van-icon name="arrow" size="12" style="margin-left:5px ;"/>
                          </view>
                      </view>
                      <view class="payment_left_bottom price_detail_tips"> 我的积分:
                          <img
                              src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                              alt=""
                              style="height: 10px; width: 10px;margin-left: 5px; margin-right: 5px;">
                          {{ currentPoints }}
                      </view>
                  </view>
                    <view class="defaultAmount">
                        <view class="paymentType">微信+积分</view>
                        <view class="amount"><span v-if="payAmount && payAmount !=='0'">￥{{useCash}}</span><span
                                v-if="payAmount && payAmount!==0 &&  payPoints && payPoints!=='0'">+</span> <span
                                v-if=" payPoints && payPoints!=='0'"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                    alt="" style="width: 10px; height: 10px; margin-right:6px;">{{useIntegrals}}</span>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- <view class="goodsAction nav_box">
            <van-goods-action class="my-goods-action">
                <van-goods-action-icon icon="service-o" @click="onClickIcon" />
                <van-goods-action-button class="my-action-buttonL" color="#FF6203" text="取消预约" @click="oncCancelService"
                    v-if="serviceGoods.orderSataus==='已预约' ||active===1" />
            </van-goods-action>
        </view> -->
        <view class="nav_box" style="height: 72px;">
            <van-submit-bar :price="allPrice" button-text="取消预约" @submit="submitCannelBooked" button-type="warning"
                :disabled="isSubmitting" :class="{ disabledSubmit: isSubmitting }">
                <view class="footContent">
                    <view class="payment_num" style="line-height: 14px;"> <span v-if="shouldShowIntegrals"><img
                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                alt="" style="height: 13px; width: 13px; margin-right: 6px;" /> {{ useIntegrals }}</span>
                        <span v-if="shouldShowPlus">+</span> <span v-if="shouldShowCash"> ¥{{ useCash }}</span></view>
                    <!-- <view class="price_detail_tips" style="line-height: 14px;"
                        v-if="totalReductionAmount && totalReductionAmount > 0"> 共减￥ {{ totalReductionAmount }}</view> -->
                </view>
            </van-submit-bar>
        </view>
        <van-toast id="van-toast" />
        <judgeServicePopup :show="show" @closePopup="closePopup"></judgeServicePopup>
        <cancelBooked :show="showCancel" @closeCancelPopup="closeCancelPopup"></cancelBooked>
        <paymentPopup :show="paymentShow" @closePayment="closePayment" :popupCash="popupCash" :needPayCashAmount="needPayCashAmount" :popupUseIntegrals="popupUseIntegrals" :myIntegralsBalance="currentPoints" :maxScore="maxPoints" :exchangeRate="'10'" @confirm="handlePaymentConfirm" ></paymentPopup>

    </view>
</template>

<script>
import judgeServicePopup from '@/mycomponents/myService/judgeServicePopup.vue';
import cancelBooked from '@/mycomponents/myService/cancelBooked.vue';
import {previewCancelServiceApi} from '@/api/service'
import paymentPopup from '@/mycomponents/shangcheng/paymentPopup.vue'

export default {
    components: {
        judgeServicePopup,
        cancelBooked,
        paymentPopup,
    },
    data() {
        return {
            isSubmitting: false, // 新增防抖状态
            debounceTimer: null, // 防抖计时器
            navBarTitle: '取消预约',
            scrolling:false,
            show:false,  //预约详情弹窗
            showCancel:false,
            isCancel:false,
            currentPoints:'2345', //我的积分
            payPoints:'0', //支付积分
            payAmount:'52', //支付金额
            useIntegrals:'0', //使用积分
            useCash:'0', //使用现金

            refundMoney:'52',
            date:'2024-10-12 18:20',
            refundAmount:'52',
            refundScore:'4540', //退回积分
            refundCoupon:1,//退回优惠券数量
            refundReason:'其他',
            applyDate:'apply', //申请时间
            refundCode:'3466777777888',
            serviceGoods: {
                orderNum:'343434343313131',
                orderStatus:'待收货',
                goodsId:11,
                imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                title:'黄芪杞姜枣糕红枣',
                price:'96',
                num:'1',
                jifen:190,
                money:'156',
                specs:'口味一：五斤装',
                logistics:''
            },
            active:0,
            activeIndex:0,
           
            labelList:['金牌保姆','会开车','育儿经验'],
            params:undefined, //接受从路由传过来的参数
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            serviceNum:'0132443',
            defaultAmount:25,
            employeeInfo:{
                avatarUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/userAvatarUrl/1747962474260_o2phmu7kyos.jpeg",
                contactPhone: "15735104035",
                id: "1924374129297477633",
                labels: [{ subjectId: "1924374129297477633", id: "1923673598621298689", name: "诚实守信", sort: 1 }],
                name: "王女士",
                other: "<p>2</p>",
                providerId: "1923329273242529794",
                providerName: "燕子家政",
                region: "山西省 运城市 盐湖区",
                replayCount: 0,
                serviceCount: 4,
                sex: 0,
                workYear: "10.0",
            },
            leServiceReservationList:{
                contactName: "吕子浩",
                contactPhone: "18059099219",
                addressDetail: "山西省运城市盐湖区G209",
                reservationTime: "2024-12-13 10:00:00",
            },
            penalty:'1',//违约金额
            reservationId:'', //预约id
            maxPoints:'', //最大可用积分
            paymentShow:false, //支付弹窗
            isDefaultSubmit:1, //默认支付方式
            popupCash:'0', //支付现金
            needPayCashAmount:'0', //需要支付现金
            popupUseIntegrals:'0', //支付积分

        }
    },
    computed: {
        shouldShowIntegrals() {
            return Number(this.useIntegrals) > 0 && Number(this.currentPoints) > 0;
        },
        shouldShowCash() {
            return Number(this.useCash) > 0;
        },
        shouldShowPlus() {
            return this.shouldShowIntegrals && this.shouldShowCash;
        },
        // canSubmit() {
        //     return this.ebUserAddressList.length > 0 &&
        //         this.selfPickupName &&
        //         this.useCash >= 0 &&
        //         !isNaN(this.useCash);
        // },
        // numericMaxPoints() {
        //     return Math.min(
        //         Number(this.orderMaxUsefulIntegrals),
        //         Number(this.integralsBalance),
        //         Math.floor(Number(this.popupCash) * this.exchangeRate)
        //     );
        // },
    },
    onLoad(data) {
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params)
            this.active = Number(this.params.actStatus)
            this.activeIndex = Number(this.params.actStatus)
            this.reservationId = this.params.reservationId
        }
    },
    onReady() {
        this.getPreviewCancelServiceInfo()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft() {
            uni.navigateBack()
        },

        // 取消预约
        oncCancelService() {
            if (this.isSubmitting) {
                Toast('订单正在提交中，请勿重复提交');
                return Promise.reject('重复提交'); // 确保后续代码不会执行
            }
            clearTimeout(this.debounceTimer);
            // 防抖锁定
            this.isSubmitting = true;
            const params = {}
            uni.navigateTo({
                url:
                    '/pages/service/cashPage?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 支付方式
        openPayment(integralsBalance, orderMaxUsefulIntegrals) {
            console.log(this.shouldShowIntegrals)
            // if (!this.shouldShowIntegrals) {
            if (integralsBalance == '0') {
                Toast('您的积分不足')
                return false
            }
            if (orderMaxUsefulIntegrals == '0') {
                Toast('该订单最大可使用积分为0')
                return false
            }

            // }
            this.paymentShow = true
        },


        closePayment() {
            this.paymentShow = false
        },
        //确认支付方式        
        handlePaymentConfirm(data, current) {
            console.log('支付方式:', data.type)
            console.log('使用积分:', data.score)
            console.log('需付现金:', data.cash)
            this.isDefaultSubmit = current == 0 ? 1 : 0
            console.log(this.isDefaultSubmit, 'this.isDefaultSubmit', current, 'current')

            // if (current !== 0) {
            //   if (this.source !== SOURCE_TYPE.SERVICE) {
            //     // 积分分摊逻辑
            //     // 将 data.score 转换为数字类型，如果 data.score 不是有效的数字，则默认为 0
            //     const totalPoints = Number(data.score) || 0
            //     const totalCash = String(Number(data.cash)).replace(/(\.0+|(?<=\.\d)0+)$/, '');

            //     console.log(this.productInfo, 'productInfo', totalPoints, 'totalPoints')
            //     // 关键修改：检查 productInfo 是否为有效数组
            //     if (!Array.isArray(this.productInfo) || this.productInfo.length === 0) {
            //       console.error('商品信息未加载完成，无法分摊积分');
            //       return; // 或根据业务需求处理错误
            //     }

            //     // 计算所有商品的折扣后总金额
            //     const totalDiscountAmount = this.productInfo.reduce((sum, item) => {
            //       // 关键修改：确保afterDiscountAmount是有效数字（处理NaN/undefined/null/非数字字符串）
            //       const fullDiscountAmount = Number(item.detailApportionFullDiscountAmount) || 0;
            //       const couponAmount = Number(item.detailApportionCouponAmount) || 0;
            //       return sum + fullDiscountAmount + couponAmount;
            //     }, 0);

            //     // 新增：计算原始价格总金额（用于totalDiscountAmount为0时的兜底）
            //     const totalOriginalAmount = this.productInfo.reduce((sum, item) => {
            //       const originalAmount = Number(item.originalityDetailAmount) || 0; // 原始价格字段
            //       return sum + originalAmount;
            //     }, 0);

            //     // 计算最终可用的总金额（原始价格减去折扣和优惠券）
            //     const finalOrderAmount = totalOriginalAmount - totalDiscountAmount;

            //     console.log(totalDiscountAmount, 'totalDiscountAmount', totalOriginalAmount, 'totalOriginalAmount', finalOrderAmount, 'finalOrderAmount')

            //     if (this.productInfo.length == 1) {
            //       // 单个商品：直接分配全部积分
            //       const singleItem = this.productInfo[0];
            //       singleItem.detailUsedPoints = String(totalPoints)
            //       singleItem.detailPointsForCashAmount = String(totalPoints / this.exchangeRate)
            //       singleItem.detailFinalActualAmount = totalCash

            //     } else {  //多个商品
            //       // 初始化剩余积分，初始值为总积分
            //       let remainingPoints = totalPoints
            //       let remainingCash = totalCash


            //       // 积分分配 按照原价格的比例分配  但是积分又不能超过商品的最大可用积分
            //       this.productInfo.forEach((item, index) => {
            //         // 获取当前商品在productList中的maxUsefulIntegrals
            //         const productInList = this.productList.find(p => p.productId == item.productId &&
            //           p.productAttrValueId === item.productAttrValueId);
            //         const maxPointsForItem = productInList ? Number(productInList.maxUsefulIntegrals) : 0;

            //         // 计算当前商品原价占总原价的比例
            //         const itemOriginalAmount = Number(item.originalityDetailAmount) || 0;
            //         const ratio = totalOriginalAmount > 0 ? itemOriginalAmount / totalOriginalAmount : 0;

            //         // 积分分配（前n-1个商品）
            //         if (index < this.productInfo.length - 1) {
            //           const remainingPrice = Number(item.originalityDetailAmount) -
            //             (Number(item.detailApportionFullDiscountAmount) || 0) -
            //             (Number(item.detailApportionCouponAmount) || 0)           // 单个商品扣掉优惠券满减后剩余价格
            //           const priceBasedPoints = Math.floor(remainingPrice * this.exchangeRate) // 剩余价格对应的积分  

            //           let allocatedPoints = Math.floor(totalPoints * ratio); // 向下取整
            //           allocatedPoints = Math.min(allocatedPoints, priceBasedPoints, maxPointsForItem); // 取三者中的最小值
            //           const roundedPoints = allocatedPoints.toFixed(2);
            //           item.detailUsedPoints = roundedPoints.replace(/(\.0+|(?<=\.\d)0+)$/, '');;
            //           remainingPoints -= allocatedPoints;
            //         } else {
            //           const points = Number(Math.min(remainingPoints, maxPointsForItem));
            //           const roundedPoints = points.toFixed(2);
            //           item.detailUsedPoints = roundedPoints.replace(/(\.0+|(?<=\.\d)0+)$/, '');;
            //         }

            //         // 积分抵现金额计算  item.detailPointsForCashAmount = String(item.detailUsedPoints / (this.exchangeRate || 1));
            //         // 积分抵现金额计算，保留两位小数并格式化
            //         const pointsCashAmount = item.detailUsedPoints / (this.exchangeRate || 1);
            //         console.log(pointsCashAmount, 'pointsCashAmount')
            //         const formattedAmount = Number(pointsCashAmount.toFixed(2)).toString();
            //         console.log(formattedAmount, 'formattedAmount')
            //         item.detailPointsForCashAmount = formattedAmount.replace(/(\.0+|(?<=\.\d)0+)$/, '');

            //         const detailFinalDiscountAmount = Number(item.detailApportionFullDiscountAmount) || 0;
            //         const detailFinalCouponAmount = Number(item.detailApportionCouponAmount) || 0;
            //         const finalAmount = Number(item.originalityDetailAmount) -
            //           Number(detailFinalDiscountAmount) -
            //           Number(detailFinalCouponAmount) -
            //           Number(item.detailPointsForCashAmount);
            //         const roundedAmount = finalAmount.toFixed(2);
            //         item.detailFinalActualAmount = roundedAmount.replace(/(\.0+|(?<=\.\d)0+)$/, '');;
            //       })

            //       // 折后价格的比例计算 积分的分摊  但是积分又不能超过商品的最大可用积分
            //       // this.productInfo.forEach((item, index) => {
            //       //     // 获取当前商品在productList中的maxUsefulIntegrals
            //       //     const productInList = this.productList.find(p => p.productId === item.productId &&
            //       //       p.productAttrValueId === item.productAttrValueId);
            //       //     const maxPointsForItem = productInList ? Number(productInList.maxUsefulIntegrals) : 0;
            //       //     // 关键修改：处理totalAmount和当前商品afterDiscountAmount均为0的情况
            //       //     let ratio = 0;
            //       //     if (totalDiscountAmount === 0 || Number(this.totalReductionAmount)==0) { // 当折扣后金额均为0时，使用原始价格计算比例

            //       //       if (totalOriginalAmount > 0 ) {  // 原始价格总和不为0 this.totalAmount !== 0
            //       //         // 计算原始价格总和
            //       //         const singleItemAmount = Number(item.originalityDetailAmount)
            //       //         ratio = singleItemAmount / finalOrderAmount;
            //       //       } else {
            //       //         // 极端情况：原始价格总和也为0（如赠品），平均分配或按数量分配（根据业务调整）
            //       //         ratio = 1 / this.productInfo.length;
            //       //       }
            //       //     } else {
            //       //       const singleItemAmount = Number(item.originalityDetailAmount)- Number(item.detailApportionFullDiscountAmount) + Number(item.detailApportionCouponAmount)
            //       //       // 正常情况使用折扣后金额计算比例
            //       //       ratio = Number(singleItemAmount) / finalOrderAmount;
            //       //     }
            //       //     // 积分分配（前n-1个商品）
            //       //     if (index < this.productInfo.length - 1) {

            //       //         let allocatedPoints = Math.floor(totalPoints * ratio); // 向下取整
            //       //         // let allocatedPoints = Number((totalPoints * ratio).toFixed(2));
            //       //         // 确保分配的积分不超过商品的最大可用积分
            //       //         allocatedPoints = Math.min(allocatedPoints, maxPointsForItem)
            //       //         // item.detailUsedPoints = Number(allocatedPoints).toFixed(2).toString()

            //       //         const roundedPoints = allocatedPoints.toFixed(2);
            //       //         item.detailUsedPoints = roundedPoints.replace(/(\.0+|(?<=\.\d)0+)$/, '');
            //       //         remainingPoints -= allocatedPoints;

            //       //         console.log(remainingPoints,'remainingPoints')
            //       //     } else {
            //       //         // 最后一个商品分配剩余积分，但不能超过该商品的最大可用积分  最后一个小数点不为0
            //       //         // item.detailUsedPoints = Number(Math.min(remainingPoints, maxPointsForItem)).toFixed(2).toString()
            //       //         const points = Number(Math.min(remainingPoints, maxPointsForItem));
            //       //         const roundedPoints = points.toFixed(2);
            //       //         item.detailUsedPoints = roundedPoints.replace(/(\.0+|(?<=\.\d)0+)$/, '')
            //       //         console.log(remainingPoints,'remainingPoints')
            //       //     }
            //       //     // 积分抵现金额计算
            //       //     item.detailPointsForCashAmount =  String(item.detailUsedPoints / (this.exchangeRate || 1))

            //       //     const detailFinalDiscountAmount = Number(item.detailApportionFullDiscountAmount) || 0;
            //       //     const detailFinalCouponAmount = Number(item.detailApportionCouponAmount) || 0;
            //       //     const finalAmount = Number(item.originalityDetailAmount) -
            //       //       Number(detailFinalDiscountAmount) -
            //       //       Number(detailFinalCouponAmount) -
            //       //       Number(item.detailPointsForCashAmount);
            //       //     const roundedAmount = finalAmount.toFixed(2);  
            //       //     item.detailFinalActualAmount = roundedAmount.replace(/(\.0+|(?<=\.\d)0+)$/, '');
            //       //       // // 现金分配（前n-1个商品）
            //       //       // if (index < this.productInfo.length - 1) {
            //       //       //     const allocatedCash = Number((totalCash * ratio).toFixed(2));
            //       //       //     item.detailFinalActualAmount = String(allocatedCash)
            //       //       //     remainingCash -= allocatedCash;
            //       //       // } else {
            //       //       //     item.detailFinalActualAmount = String(remainingCash.toFixed(2))
            //       //       // }
            //       // })

            //       // // 遍历每个商品信息
            //       // this.productInfo.forEach((item, index) => {
            //       //   // 最后一个商品使用尾插法处理剩余积分
            //       //   if (index === this.productInfo.length - 1) {
            //       //     // 将剩余的积分全部分配给最后一个商品
            //       //     item.detailUsedPoints = remainingPoints
            //       //     // 根据积分兑换率计算该商品使用积分可抵扣的现金金额
            //       //     item.detailPointsForCashAmount = item.detailUsedPoints / this.exchangeRate
            //       //   } else {
            //       //     // 按比例分配积分
            //       //     // 计算当前商品的折扣后金额占总金额的比例
            //       //     const ratio = item.afterDiscountAmount / totalAmount;
            //       //     // 按比例分配积分给当前商品，并向下取整
            //       //     item.detailUsedPoints = Math.floor(totalPoints * ratio);
            //       //     // 减去已分配给当前商品的积分，更新剩余积分
            //       //     remainingPoints -= item.detailUsedPoints;
            //       //     // 根据积分兑换率计算该商品使用积分可抵扣的现金金额
            //       //     item.detailPointsForCashAmount = item.detailUsedPoints / this.exchangeRate
            //       //   }
            //       // })
            //     }
            //   }
            // }

            // 提交支付请求...
            this.useIntegrals = data.score
            this.useCash = String(Number(data.cash)).replace(/(\.0+|(?<=\.\d)0+)$/, '');

            console.log(this.useIntegrals, this.useCash, this.popupCash, this.popupUseIntegrals, 'this.useIntegrals', this.productInfo, 'this.productInfo')
            // this.popupCash = data.cash
            // 确保金额不会出现负数
            if (Number(this.useCash) < 0) {
                this.useCash = 0;
                Toast('支付金额异常，已重置为纯现金支付');
            }

            // this.selectPayType()
        },

        //   确认取消
        submitCannelBooked() { },

        getPreviewCancelServiceInfo(){
            previewCancelServiceApi({
                reservationId:this.reservationId
            }).then(res=>{
                if(res.code===200){
                    this.currentPoints=res.data.currentPoints
                    this.employeeInfo = res.data.employeeInfo
                    this.leServiceReservationList = res.data.leServiceReservationList
                    this.penalty = res?.data?.penalty
                    this.maxPoints=res.data?.maxPoints || 0
                    if (this.penalty > 0){
                        const totalPoints = Number(this.penalty) * 10
                        const useIntegrals = Math.min(Number(this.maxPoints), Number(this.currentPoints), Number(totalPoints))  // 计算可用积分
                        const useCash = Number(totalPoints) - Number(useIntegrals)
                        this.popupUseIntegrals = useCash==0? totalPoints : useIntegrals
                        this.useIntegrals = useIntegrals
                        this.popupCash = useCash==0? this.penalty : useCash
                        this.useCash = useCash
                        this.needPayCashAmount = useCash
                    
           
                    }
                }
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll_wrapper{
    padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
}
.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}
.text{
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}
.money{
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left:19px;
}

.date{
    margin-top: 36px;
    padding: 0px 24px;
}

.refundDetail{
    padding: 42px 24px 24px 24px ;
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundText{
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundR{
    color: #888888;
}
/* dingdan编号 */
.refundCode{
    display: flex;
    align-items: center;
}
/* 复制两个字体 */
.copy {
    font-size: 12px;
    text-align: right;
    color: #111111;
    line-height: 12px;
  }
.orderList {
    padding: 40rpx 0px;
    margin: 0rpx 48rpx;
    background-color: #ffffff;
    width: calc(100% - 96rpx);
    // border-bottom: 1px solid #F0F0F0;

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    .orderTopRight {
        width: 100%;
    }

    .listTop {
        display: flex;
        align-items: center;

        .listTopLeft {
            width: 147rpx;

            img {
                width: 100%;
                height: auto;
            }
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 20rpx;
        width: 100%;

        .wraper_left {
            display: flex;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        // .wraper_right {
        //     float: right;
        // }

        .goodsPic {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }

        .goodsText {
            width: 67%;
            margin-left: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 12rpx;
            padding-bottom: 20rpx;
            text-align: left;

            .goodsTop {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .goods_T {
                    max-width: 80%;
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }

            }

            .goodsMiddle {
                margin-top: 26rpx;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;
                line-height: 22rpx;

                span {
                    margin-left: 20rpx;
                }
            }

            .goodsBottom {
                margin-top: 25rpx;
                display: flex;
                align-items: center;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;

                span {
                    margin-left: 20rpx;
                    font-size: 22rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 22rpx;
                }
            }
        }
    }
}

// 服务信息预约码
.serviceCodeBox {
    padding: 24rpx 48rpx 48rpx 48rpx;
    text-align: center;

    img {
        width: 260rpx;
        height: 260rpx;
    }
    .serviceNum{
        margin-top: 24rpx;
        font-size: 28rpx;
        color: #111111;
        line-height: 28rpx;
    }
    .codeTips{
        margin-top: 24rpx;
        color: #999999;
        font-size:24rpx;
        // line-height: 24rpx;
    }
}


// 预约详情
.serviceInfo{
    // margin-top: 55rpx;
    margin:55rpx 48rpx 0 48rpx;
    border-bottom:1px solid #f0f0f0;
    .serviceInfoTitle{
        font-size: 38rpx;
        text-align: left;
        color: #111111;
        line-height: 38rpx;
    }
    .serviceInfoContent{
        margin-top: 52rpx;
        // padding-bottom: 49rpx;
        .serviceInfoLabel{
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #888888;
            margin-bottom: 38rpx;

            span{
                font-size: 28rpx;
                text-align: left;
                color: #111111;
                line-height: 28rpx;
            }
        }
    }
}
// 服务人员
.serviceStaffInfo{
    padding:48rpx 48rpx 0 48rpx;

    .serviceStaffInfoTitle{
        font-size: 38rpx;
        text-align: left;
        color: #111111;
        line-height: 38rpx;
    }
    .serviceStaffInfoContent{
        padding-top: 32rpx;
        padding-bottom: 32rpx;
        display: flex;


        .serviceStaffImg{
            width: 15%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            img{
                width: 100%;
                height: auto;
            }
        }
        .serviceStaffText{
            margin-left: 44rpx;
            .staffName{
                font-weight: bolder;
                font-size: 38rpx;
                text-align: left;
                color: #111111;
                line-height: 38rpx; 
                display: flex;
                align-items: center;

                span{
                    font-weight: normal;
                    font-size: 26rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 26rpx;
                    padding-left:20rpx;
                }
            }
            .staffInfoLabel{
                display: flex;
                margin-top: 18rpx;

                .labelItem{
                    border: 1rpx solid #FF6202;
                    // background-color: rgb(255, 98, 3, 0.06);
                    background-color: #FFF4ED;
                    color: #FF6203;
                    font-size: 20rpx;
                    line-height: 20rpx;
                    text-align: center;
                    padding: 6rpx 14rpx;
                    // border-radius: 25rpx;
                    margin-right: 16rpx;
                }
                .blueItem{
                    border: 1px solid #0094D9;
                    background-color: rgb(0, 148, 217, 0.06);
                    color: #0094D9;
                }
                .greenItem{
                    border: 1px solid #00CB00;
                    background-color: rgb(0, 203, 0, 0.06);
                    color: #00CB00;
                }
                .labelItem:last-child{
                    margin-right: 0rpx;
                }
            }
        }
        .serviceInfoTel{
            text-align: right;
            margin-left: 60rpx;
        }

    }
}
// 违约详情
.paymentInfo,.defaultDetailBox{
    margin:0 48rpx;
    padding: 48rpx 0;
    border-top: 1px solid #f0f0f0;

    .paymentInfo_top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        // font-size: 28rpx;
    }
    .myPoints{
        font-size: 28rpx;
        text-align: left;
        color: #999;
    }
    .defaultAmount{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        margin-top: 24rpx;
        font-size: 32rpx;
        text-align: left;
        color: #333; 
    }
    .cancelDefaultAmount{
        font-weight: 500;
        font-size: 56rpx;
        text-align: left;
        color: #333;
    }
    .amount{
        display: flex;
        align-items: center;
    }

}
.topInfo{
    border-top: none!important;
    border-bottom: 1px solid #f0f0f0;

}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBarS .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
::v-deep  .van-goods-action, .van-goods-action--safe{
    border-top: 1px solid #f9f9f9 !important;
}

 .t16{
    margin-top: 16px;
 }


 .progress-container {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    justify-content: space-between;
}
.progressItem{
    // display: flex;
    position: relative;
}
.progress-step {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.step-icon {
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    // background-color: #D4D4D4;
    // color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: 12px;
    img{
        width: 34rpx;
        height: 34rpx;
    }
}

.completed.step-icon {
    background-color: #FF6203;
}

.step-label {
    margin-top: 34rpx;
    font-size: 28rpx !important;
    line-height: 28rpx;
    text-align: center;
    color: #111111;
}

.progress-line-Item{
    position: absolute;
    top: 0rpx;
    left: 56rpx;
}
.progress-line {
    height: 4rpx;
    width: 147rpx;
    background-color: #D4D4D4;
    margin: 0rpx 8rpx;
}

.completed.progress-line {
    background-color: #FF6203;
}

::v-deep .van-button--primary {
    background: #ff6203 !important;
    background-color: #ff6203 !important;
    color: #ffffff;
    border: none !important;
    font-size: 28rpx !important;
    border-radius: 50rpx;
    width: 100%;
}


// 支付方式选择
.payment {
    padding: 20px 0px;
    margin-bottom: 40px;
}

.payment_top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .payment_left,
    .payment_right {
        font-weight: bolder;
    }

    .payment_right {
        display: flex;
        align-items: center;
    }
}
// 需要支付的积分+金额
.payment_num {
  font-weight: bolder;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: #111111;
}
// 很多地方字体 颜色公用
.price_detail_name{
  font-size: 28rpx;
  text-align: left;
  color: #111111;
}

.price_detail_tips{
  font-size: 24rpx;
  text-align: left;
  color: #666666;
  margin-top: 10rpx;
}
</style>
